layui.use(['form', 'table', 'util'], function () {
    var table = layui.table;
    let form = layui.form
        , util = layui.util;



    tableRender({});
    //监听锁定操作
    form.on('checkbox(lockDemo)', function (obj) {
        let aa = 1 == 2 ? 1 : 0;//三元运算符
        let data = {id: this.value, enable: obj.elem.checked ? 1 : 0};
        $.ajax({
            url: '/back/user/updateEnable',//对应的是Java servlet里面的注解地址
            data: data,// 要传递给Java的数据，统一以对象的形式传递{}
            type: 'post',//对应的是servlet里面的方法,除了查询用get其他都用post
            dataType: 'json',//java传递到前端的数据统一格式json
            success: function (res) {// Java后台给前端的返回信息，res就是返回的结果
                console.log(res);
                if (res.msg == "error") {
                    layer.msg("更新失败");
                } else {
                    layer.msg("更新成功");
                }
            }
        });
        // layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
    });
    //监听单元格编辑
    table.on('edit(test)', function (obj) {
        var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
        $.ajax({
            url: '/back/user/updateField',//对应的是Java servlet里面的注解地址
            data: {id: data.id, field: field, value: util.escape(value)},// 要传递给Java的数据，统一以对象的形式传递{}
            type: 'post',//对应的是servlet里面的方法,除了查询用get其他都用post
            dataType: 'json',//java传递到前端的数据统一格式json
            success: function (res) {// Java后台给前端的返回信息，res就是返回的结果
                console.log(res);
                if (res.msg == "error") {
                    layer.msg("更新失败");
                } else if (res.msg == 'sameUsername') {
                    layer.msg("用户名不能相同");
                } else {
                    layer.msg("更新成功");
                }
            }
        });
        // layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) {
        var data = obj.data;
        //console.log(obj)
        if (obj.event === 'del') {
            layer.confirm('真的删除行么', function (index) {
                //调用Java后台的删除
                // deleteUser(data.id);
                $.ajax({
                    url: '/back/user/delete',//对应的是Java servlet里面的注解地址
                    data: {id: data.id},// 要传递给Java的数据，统一以对象的形式传递{}
                    type: 'post',//对应的是servlet里面的方法,除了查询用get其他都用post
                    dataType: 'json',//java传递到前端的数据统一格式json
                    success: function (res) {// Java后台给前端的返回信息，res就是返回的结果
                        console.log(res);
                        if (res.msg == "error") {
                            layer.msg("删除失败");
                        } else {
                            layer.msg("删除成功");
                            obj.del();
                            layer.close(index);
                            // tableRender();
                        }
                    }
                });

            });
        } else if (obj.event === 'edit') {
            sessionStorage.setItem("userId", data.id);
            xadmin.open('编辑用户', '/html/user/member-update.html', 600, 400);
            // layer.prompt({
            //     formType: 2
            //     , value: data.email
            // }, function (value, index) {
            //     obj.update({
            //         email: value
            //     });
            //     layer.close(index);
            // });
        } else if (obj.event === 'editPass') {
            xadmin.open('密码修改', '/html/user/member-update-pass.html', 600, 400);
        }
    });

    form.on('submit(sreach)', function (data) {
        data = data.field;
        let hobby = [];
        $("input[type=checkbox][name=hobby]:checked").each(function () {
            hobby.push($(this).attr("title"));
        });
        data.hobby = hobby.toLocaleString();
        console.log(data, "--------");
        tableRender(data);
        return false;//不然刷新页面
    })
});

//根据id删除用户
function deleteUser(id) {

}

//单独提取出方法就是为了重用
function tableRender(data) {
    layui.use(['form', 'table', 'util'], function () {
        var table = layui.table;
        let form = layui.form
            , util = layui.util;
        // let data={};
        //渲染到表格
        table.render({
            elem: '#test'
            , url: '/back/user/findAll'// 后台servlet的注解地址
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , where: data
            , parseData: function (res) { //res 即为原始返回的数据
                console.log(res);
                console.log(res.msg);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            , title: '用户数据表'
            , cols: [[
                {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                , {field: 'username', title: '用户名', width: 120, edit: 'text'}
                , {
                    field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {
                        let email = '';//定义一个变量为空
                        if (res.email == 'null' || res.email == undefined) {
                            // 判断如果email为null，或者为undefined不做任何事情
                        } else {
                            email = res.email;
                        }
                        return '<em style="color: red;">' + email + '</em>'
                    }
                }
                , {field: 'sex', title: '性别', width: 80, edit: 'text', sort: true}
                , {field: 'hobby', title: '爱好', width: 100}
                , {field: 'birthday', title: '生日'}
                , {field: 'enable', title: '状态', width: 100, sort: true, templet: '#enable'}
                , {field: 'phone', title: '电话', width: 120}

                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 250}
            ]]
            , page: true//开启分页
        });
    });
}